<script>
$(function() {
$( ".datepicker" ).datepicker();
});
$(document).ready(function(){
	$('#btn-save').click(function(){
		$('.modal-body').html('');
		var url = $('#url').val(), msg = $('#message').val(), pages = $('#pages').val(), sdate = $('#sdate').val() + ' ' + $('#shour').val();
		var picture = $('#picture').val(), caption = $('#caption').val(), desc = $('#desc').val(), name = $('#name').val();
		var btn = $(this);
		if(pages == null){
			$('#pages').focus();
			return false;
		}
		if(url == '' && msg == ''){
			$('#url').focus();
			return false;
		}
		btn.button('loading');
		$('.modal-body').html('<img src="/images/loading.gif" /> Sending to Facebook');
		//$('#btn-save').html('Submitting...');
		$.ajax({
			url: '<?php echo route('publish') ?>',
			dataType: 'json',
			type: 'POST',
			data: {url:url,msg:msg,pages:pages,picture:picture,caption:caption,desc:desc,name:name,sdate:sdate},
			success: function(rs){
				if(typeof rs != 'undefined' && rs.length > 0){
					var fbdata = '<p class="text-success">Posts submitted, click on IDs below to view on Facebook.</p>';
					for(i = 0; i < rs.length; i++){
						if(rs[i] != null){
							fbdata += '<p><a href="http://facebook.com/'+rs[i]+'" target="_blank">'+rs[i]+'</a></p>';
						}
						else{
							fbdata += '<p>FAILED</p>';
						}
					}
					$('.modal-body').html(fbdata);
				}
				else{
					$('.modal-body').html('Error when posting data.');
				}
				btn.button('reset');
			},
			error: function(xhr, status, err){
				btn.button('reset');
				alert("Error when posting data\n" + xhr.responseText);
			}
		});

	});
	$('.page-reload').click(function(){
		location.href=location.href;
	});
	$('#schedule_tip').click(function(){
		$('#schedule_div').toggle();
	})
});
</script>
<div class="col-md-5">
<div class="well">
	<div class="panel panel-default">
	  <!-- Default panel contents -->
	  <div class="panel-heading"><h4>Add schedule post</h4></div>
	  <!-- Table -->
	  <div class="container-fluid" style="margin:10px 0;">
		  <form class="form-horizontal" role="form">
		  	<div class="form-group">
			    <label for="pages" class="col-sm-4 control-label">Select pages</label>
			    <div class="col-sm-8">
			      <select name="pages" class="form-control" id="pages" multiple style="max-width: 400px;">
			      	<?php
			      	echo getOptPage();
			      	?>
			      </select>
			    </div>
			</div>
			<hr />
			<div class="form-group">
				<div style="margin:0 15px">
					<div class="alert alert-info">
						<span class="glyphicon glyphicon-info-sign"> </span> You do not need to fill all fields below. Require either <strong>Link</strong> or <strong>Message</strong>.
					</div>
				</div>
			</div>
		  	<div class="form-group">
			    <label for="url" class="col-sm-4 control-label">Link</label>
			    <div class="col-sm-8">
			      <input type="text" name="url" class="form-control" id="url" value="">
			    </div>
			</div>
		  	<div class="form-group">
			    <label for="message" class="col-sm-4 control-label">Message</label>
			    <div class="col-sm-8">
			      <textarea class="form-control" name="message" id="message" rows="2"></textarea>
			    </div>
			</div>
		  	<div class="form-group">
			    <label for="picture" class="col-sm-4 control-label">Picture</label>
			    <div class="col-sm-8">
			      <input type="text" name="picture" class="form-control" id="picture" value="">
			    </div>
			</div>
		  	<div class="form-group">
			    <label for="name" class="col-sm-4 control-label">Name</label>
			    <div class="col-sm-8">
			      <input type="text" name="name" class="form-control" id="name" value="">
			    </div>
			</div>
		  	<div class="form-group">
			    <label for="caption" class="col-sm-4 control-label">Caption</label>
			    <div class="col-sm-8">
			      <input type="text" name="caption" class="form-control" id="caption" value="">
			    </div>
			</div>
		  	<div class="form-group">
			    <label for="desc" class="col-sm-4 control-label">Description</label>
			    <div class="col-sm-8">
			      <textarea class="form-control" name="desc" id="desc" rows="2"></textarea>
			    </div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label" for="sdate">Schedule post</label>
				<div class="col-sm-8 form-inline">
					<input type="text" class="form-control datepicker input-sm" id="sdate" style="width: 120px; font-weight: bold;" value="<?php echo date('m/d/Y') ?>">
					<input type="text" class="form-control input-sm" id="shour" style="width: 120px; font-weight: bold;" value="<?php echo date('H:i:s') ?>" placeholder="H:M:S">
					<span class="glyphicon glyphicon-question-sign" id="schedule_tip" style="cursor: pointer;"> </span>
				</div>
			</div>
			<div class="form-group" style="display: none;" id="schedule_div">
				<div class="col-sm-offset-4 col-sm-8">
					<div class="alert alert-warning">
						If the schedule time is between ten minutes and six months from now, it will be schedule on facebook. Otherwise, it'll publish immediately.
					</div>
				</div>
			</div>
			  <div class="form-group">
			    <div class="col-sm-offset-4 col-sm-8">
			      <button type="button" data-backdrop="static" data-keyboard="false" id="btn-save" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-open"></span> Submit</button>
			    </div>
			  </div>

		  </form>
		  
		</div>
	</div>
</div>
</div>

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close page-reload" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Result</h4>
  </div>
  <div class="modal-body">
    
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default page-reload" data-dismiss="modal">Close</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->